import React from "react";
import { COLORS, Colors } from "styles/var/colors";

interface ISparklesProps {
  color?: Colors;
}

const Sparkles = ({ color = "ui-fleet-black-75" }: ISparklesProps) => {
  return (
    <svg
      width="16"
      height="17"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 17"
    >
      <path
        d="M9.03 2.767a.5.5 0 0 1 .939 0l1.342 3.627a.5.5 0 0 0 .295.295l3.627 1.342a.5.5 0 0 1 0 .938l-3.627 1.342a.5.5 0 0 0-.295.295l-1.342 3.627a.5.5 0 0 1-.938 0l-1.342-3.627a.5.5 0 0 0-.295-.295L3.767 8.969a.5.5 0 0 1 0-.938L7.394 6.69a.5.5 0 0 0 .295-.295l1.342-3.627ZM2.765 1.134a.25.25 0 0 1 .47 0l.535 1.448a.25.25 0 0 0 .148.148l1.448.536a.25.25 0 0 1 0 .468l-1.448.536a.25.25 0 0 0-.148.148l-.536 1.448a.25.25 0 0 1-.469 0L2.23 4.418a.25.25 0 0 0-.147-.148L.633 3.734a.25.25 0 0 1 0-.468l1.449-.536a.25.25 0 0 0 .147-.148l.536-1.448ZM2.765 11.134a.25.25 0 0 1 .47 0l.535 1.448a.25.25 0 0 0 .148.148l1.448.535a.25.25 0 0 1 0 .47l-1.448.535a.25.25 0 0 0-.148.148l-.536 1.448a.25.25 0 0 1-.469 0l-.536-1.448a.25.25 0 0 0-.147-.148l-1.449-.535a.25.25 0 0 1 0-.47l1.449-.535a.25.25 0 0 0 .147-.148l.536-1.448Z"
        fill={COLORS[color]}
      />
    </svg>
  );
};

export default Sparkles;
